<template>
  <div>
    <div>
<!--      {{getData}}-->
      <div v-for="(config,index) in getData" :key="index" style="display:flex;align-items: center;height: 30px">
        <span>{{city[index]}}</span>
        <svg-test :config="config"></svg-test>
      </div>

<!--            <div style="height: 200px;display: flex;">-->
<!--              <div v-for="(config,index) in testData1" :key="index" style="height: 100%;flex: 1;margin-left: 15px;position: relative">-->
<!--                <svg-test :config="config" style="position: absolute;bottom: 20px"></svg-test>-->
<!--                <span style="position: absolute;bottom: 0">{{city[index]}}</span>-->
<!--              </div>-->
<!--            </div>-->
    </div>
    <div v-if="row">横着展示的
      <button @click="rowData">12</button>
    </div>
    <div v-else>竖着展示的</div>
  </div>
</template>

<script>
  import SvgTest from './SvgTest'

  let lodash = require('lodash')

  export default {
    name: 'Main',
    components: {
      SvgTest
    },
    data() {
      return {
        row: true,
        number: [[20, 10, 22, 60, 90, 100, 200, 120], [90, 1, 200, 120, 20, 10, 30, 60], [20, 130, 100, 11, 22, 30, 60, 90]],
        // config: {
        // color: '#f5ef42',
        //   width: '60%',
        //   height: '15'
        // },
        // testData: [{
        //   color: '#f5ef42',
        //   width: '20%',
        //   height: '15'
        // }, {
        //   color: '#42f575',
        //   width: '40%',
        //   height: '15'
        // }, {
        //   color: '#41eefa',
        //   width: '60%',
        //   height: '15'
        // }, {
        //   color: '#312fad',
        //   width: '80%',
        //   height: '15'
        // }, {
        //   color: '#ad2f70',
        //   width: '100%',
        //   height: '15'
        // }],
        city: ['四川', '武汉', '重庆', '北京', '西藏'],
        // testData1: [{
        //   color: '#f5ef42',
        //   width: '20',
        //   height: '100'
        // }, {
        //   color: '#42f575',
        //   width: '20',
        //   height: '80'
        // }, {
        //   color: '#41eefa',
        //   width: '20',
        //   height: '60'
        // }, {
        //   color: '#312fad',
        //   width: '20',
        //   height: '40'
        // }, {
        //   color: '#ad2f70',
        //   width: '20',
        //   height: '20'
        // }]
      }
    },
    methods: {
      rowData() {
        let newNumber = []
        for (let num in this.number) {
          let color = '#ad2f70'
          let height = '15'
          let sum = lodash.sum(this.number[num])
          // let nums = this.number[num].map(value => {
          //   return (value * 100 / sum).toFixed(2) + '%'
          // })
          for (let i in this.number[num]) {
            newNumber.push({color, height, width: (this.number[num][i] * 100 / sum) + '%'})
          }
          console.log(newNumber)
          return newNumber
        }
      }
    },
    computed: {
      getData: function () {
        // console.log(this.rowData())
        return this.rowData()
      }
    }
  }
</script>
